#footer
  background: linear-gradient(to top, var(--color-footer-background) 50%, transparent)
  display: flex
  justify-content: center
  flex-direction: column
  margin-top: auto
  padding: 40px 0 20px 0
  color: var(--color-grey)

  &:hover
    .footer-line
      transition: opacity 0.3s ease
      opacity: 0.5

  a
    color: var(--color-link)
    text-decoration: none

    &:hover
      text-decoration: underline

.footer-line
  margin-top: 20px
  opacity: 0.3
  width: 200%
  height: 10px
  background-image: linear-gradient(to left, rgba(255, 0, 0, 0.75) 50%, transparent 0%)
  background-size: 100px 10px
  background-repeat: repeat-x
  transition: opacity 0.3s
  margin-bottom: 40px
  animation: transform-all 3s infinite
  animation-timing-function: linear
  filter: drop-shadow(0px 0px 2px red)

#footer-info
  line-height: line-height
  font-size: 0.85em
  width: 100%
  margin: 0

  div
    margin: 5px 0
    display: flex
    justify-content: center

.icon-copyright
  &:before
    font-family: font-icon
    content: "\f1f9"

.icon-brush
  margin: 0 5px

  &:before
    font-family: font-icon
    content: "\f1fc"

.icon-coffee
  margin: 0 5px

  &:before
    font-family: font-icon
    content: "\f0f4"

.icon-eye
  margin: 0 5px

  &:before
    font-family: font-icon
    content: "\f06e"

.icon-user
  margin: 0 5px

  &:before
    font-family: font-icon
    content: "\f007"

.footer-info-sep
  width: 25px
  opacity: 0.6
  background: url("/images/taichi.png") no-repeat center / 80%
  animation: rotate-all 3s infinite
  animation-timing-function: linear

@keyframes rotate-all
  100%
    transform: rotate(360deg)

@keyframes transform-all
  100%
    transform: translateX(-100px)
